<template>
  <div class="article_title">
    <span class="article_item_title"><slot name="icon"></slot></span>
    <span class="article_item_icon"><slot name="title"></slot></span>
    <div class="article_item_underline"></div>
  </div>
</template>

<script></script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .article_title {
      position: relative;
      font-size: 30px;
      color: var(--text-bright);
      margin: 25px 0;
      .article_item_icon {
        margin-left: 10px;
      }
      .article_item_underline {
        width: 96px;
        height: 7px;
        margin-top: 7px;
        border-radius: 2px;
        background: linear-gradient(
          130deg,
          rgb(36, 198, 220),
          rgb(84, 51, 255) 41.07%,
          rgb(255, 0, 153) 76.05%
        );
      }
    }
  }

  @media only screen and (max-width: 990px) {
    .article_title {
      position: relative;
      font-size: 20px;
      color: var(--text-bright);
      margin: 20px 0;
      .article_item_icon {
        margin-left: 10px;
      }
      .article_item_underline {
        width: 80px;
        height: 5px;
        margin-top: 7px;
        border-radius: 2px;
        background: linear-gradient(
          130deg,
          rgb(36, 198, 220),
          rgb(84, 51, 255) 41.07%,
          rgb(255, 0, 153) 76.05%
        );
      }
    }
  }
</style>
